---
title: Przyciski
image: /images/user-guide/views/filter.png
---

<Frame>
  <img src="/images/user-guide/views/filter.png" alt="Header" />
</Frame>

Lista przycisków i grup przycisków używanych w aplikacji.

## Przycisk

<Tabs>

<Tab title="Usage">

```jsx
import { Button } from "@/ui/input/button/components/Button";

export const MyComponent = () => {
  return (
    <Button
      className
      Icon={null}
      title="Title"
      fullWidth={false}
      variant="primary"
      size="medium"
      position="standalone"
      accent="default"
      soon={false}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ                   | Opis                                                                                                                                       |
| -------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------ |
| nazwaKlasy                             | ciąg znaków           | Opcjonalna nazwa klasy dla dodatkowego stylowania                                                                                          |
| Ikona                                  | `React.ComponentType` | Opcjonalny komponent ikony wyświetlany wewnątrz przycisku                                                                                  |
| tytuł                                  | ciąg znaków           | Treść tekstowa przycisku                                                                                                                   |
| pełnaSzerokość                         | boolean               | Określa, czy przycisk ma zajmować całą szerokość kontenera                                                                                 |
| wariant                                | ciąg znaków           | The visual style variant of the button. Opcje obejmują `primary`, `secondary`, i `tertiary`                                |
| rozmiar                                | ciąg znaków           | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni`                                                   |
| pozycja                                | ciąg znaków           | Pozycja przycisku w odniesieniu do jego sąsiadów. Options include: `standalone`, `left`, `middle`, `right` |
| akcent                                 | ciąg znaków           | Kolor akcentu przycisku. Options include: `default`, `blue`, and `danger`                                  |
| wkrótce                                | boolean               | Wskazuje, czy przycisk jest oznaczony jako „wkrótce” (np. dla nadchodzących funkcji)                    |
| wyłączony                              | boolean               | Określa, czy przycisk jest wyłączony                                                                                                       |
| ostrość                                | boolean               | Determines if the button has focus                                                                                                         |
| naKliknięciu                           | funkcja               | Funkcja zwrotna, która uruchamia się po kliknięciu przycisku                                                                               |

</Tab>

</Tabs>

## Grupa Przycisków

<Tabs>
<Tab title="Usage">
```jsx
import { Button } from "@/ui/input/button/components/Button";
import { ButtonGroup } from "@/ui/input/button/components/ButtonGroup";

export const MyComponent = () => {
return ( <ButtonGroup variant="primary" size="large" accent="blue" className>
<Button
className
Icon={null}
title="Button 1"
fullWidth={false}
variant="primary"
size="medium"
position="standalone"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 2"
fullWidth={false}
variant="secondary"
size="medium"
position="left"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/>
<Button
className
Icon={null}
title="Button 3"
fullWidth={false}
variant="tertiary"
size="medium"
position="right"
accent="blue"
soon={false}
disabled={false}
focus={false}
onClick={() => console.log("click")}
/> </ButtonGroup>
);
};

````
</Tab>

<Tab title="Props">


| Props | Type | Description |
|-------|------|-------------|
| variant | string | The visual style variant of the buttons within the group. Options include `primary`, `secondary`, and `tertiary` |
| size | string | The size of the buttons within the group. Has two options: `medium` and `small` |
| accent | string | The accent color of the buttons within the group. Options include `default`, `blue` and `danger` |
| className | string | Optional class name for additional styling |
| children | ReactNode | An array of React elements representing the individual buttons within the group |



</Tab>
</Tabs>


## Floating Button

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButton
      className
      Icon={IconSearch}
      title="Title"
      size="medium"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={true}
    />
  );
};
````

</Tab>

<Tab title="Props">

| zastosujRozmycie | Typ                   | Opis                                                                                                                                 |
| ---------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| nazwaKlasy       | ciąg znaków           | Opcjonalna nazwa dla dodatkowego stylowania                                                                                          |
| Ikona            | `React.ComponentType` | Opcjonalny komponent ikony wyświetlany wewnątrz przycisku                                                                            |
| tytuł            | ciąg znaków           | Treść tekstowa przycisku                                                                                                             |
| rozmiar          | ciąg znaków           | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni`                                             |
| pozycja          | ciąg znaków           | Pozycja przycisku w odniesieniu do jego sąsiadów. Opcje obejmują: `sam`, `lewa`, `prawa`, i `środek` |
| zastosujCień     | boolean               | Określa, czy zastosować cień na przycisk                                                                                             |
| zastosujCień     | boolean               | Określa, czy zastosować efekt rozmycia na przycisk                                                                                   |
| wyłączony        | boolean               | Określa, czy przycisk jest wyłączony                                                                                                 |
| ostrość          | boolean               | Wskazuje, czy przycisk ma ostrość                                                                                                    |

</Tab>
</Tabs>

## Grupa Pływających Przycisków

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingButton } from "@/ui/input/button/components/FloatingButton";
import { FloatingButtonGroup } from "@/ui/input/button/components/FloatingButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingButtonGroup size="small">
      <FloatingButton
        className
        Icon={IconClipboardText}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
        focus={true}
      />
      <FloatingButton
        className
        Icon={IconCheckbox}
        title
        size="small"
        position="standalone"
        applyShadow={true}
        applyBlur={true}
        disabled={false}
      />
    </FloatingButtonGroup>
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                                     | Domyślny |
| -------------------------------------- | ----------- | ---------------------------------------------------------------------------------------- | -------- |
| rozmiar                                | ciąg znaków | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni` | mały     |
| children                               | ReactNode   | Tablica elementów React reprezentujących poszczególne przyciski w grupie                 |          |

</Tab>

</Tabs>

## Pływający Ikonowy Przycisk

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButton } from "@/ui/input/button/components/FloatingIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <FloatingIconButton
      className
      Icon={IconSearch}
      size="small"
      position="standalone"
      applyShadow={true}
      applyBlur={true}
      disabled={false}
      focus={false}
      onClick={() => console.log("click")}
      isActive={true}
    />
  );
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ                   | Opis                                                                                                                                 |
| -------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| nazwaKlasy                             | ciąg znaków           | Opcjonalna nazwa dla dodatkowego stylowania                                                                                          |
| Ikona                                  | `React.ComponentType` | Opcjonalny komponent ikony wyświetlany wewnątrz przycisku                                                                            |
| rozmiar                                | ciąg znaków           | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni`                                             |
| pozycja                                | ciąg znaków           | Pozycja przycisku w odniesieniu do jego sąsiadów. Opcje obejmują: `sam`, `lewa`, `prawa`, i `środek` |
| zastosujCień                           | boolean               | Określa, czy zastosować cień na przycisk                                                                                             |
| zastosujCień                           | boolean               | Określa, czy zastosować efekt rozmycia na przycisk                                                                                   |
| wyłączony                              | boolean               | Określa, czy przycisk jest wyłączony                                                                                                 |
| ostrość                                | boolean               | Wskazuje, czy przycisk ma ostrość                                                                                                    |
| naKliknięciu                           | funkcja               | Funkcja zwrotna, która uruchamia się po kliknięciu przycisku                                                                         |
| isActive                               | boolean               | Określa, czy przycisk jest w stanie aktywnym                                                                                         |

</Tab>

</Tabs>

## Grupa Pływających Ikonowych Przycisków

<Tabs>
<Tab title="Usage">

```jsx
import { FloatingIconButtonGroup } from "@/ui/input/button/components/FloatingIconButtonGroup";
import { IconClipboardText, IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  const iconButtons = [
    {
      Icon: IconClipboardText,
      onClick: () => console.log("Button 1 clicked"),
      isActive: true,
    },
    {
      Icon: IconCheckbox,
      onClick: () => console.log("Button 2 clicked"),
      isActive: true,
    },
  ];

  return (
    <FloatingIconButtonGroup
    className
    size="small"
    iconButtons={iconButtons} />
  );
};

```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ         | Opis                                                                                                                                                                                                                                                                                             |
| -------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| nazwaKlasy                             | ciąg znaków | Opcjonalna nazwa dla dodatkowego stylowania                                                                                                                                                                                                                                                      |
| rozmiar                                | ciąg znaków | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni`                                                                                                                                                                                                         |
| ikonyPrzycisków                        | tablica     | Tablica obiektów, z których każdy reprezentuje ikonowy przycisk w grupie. Każdy obiekt powinien zawierać komponent ikony, który chcesz wyświetlić na przycisku, funkcję, którą chcesz wywołać po kliknięciu przycisku i informację, czy przycisk ma być aktywny. |

</Tab>

</Tabs>

## Lekki Przycisk

<Tabs>
<Tab title="Usage">

```jsx
import { LightButton } from "@/ui/input/button/components/LightButton";

export const MyComponent = () => {
  return <LightButton
  className
  icon={null}
  title="Title"
  accent="secondary"
  active={false}
  disabled={false}
  focus={true}
  onClick={()=>console.log('click')}
  />;
};
```

</Tab>

<Tab title="Props">

| Właściwości (Props) | Typ               | Opis                                                                                                 |
| -------------------------------------- | ----------------- | ---------------------------------------------------------------------------------------------------- |
| nazwaKlasy                             | ciąg znaków       | Opcjonalna nazwa dla dodatkowego stylowania                                                          |
| ikona                                  | `React.ReactNode` | Ikona, którą chcesz wyświetlić na przycisku                                                          |
| tytuł                                  | ciąg znaków       | Treść tekstowa przycisku                                                                             |
| akcent                                 | ciąg znaków       | Kolor akcentu przycisku. Options include: `secondary` and `tertiary` |
| aktywny                                | boolean           | Określa, czy przycisk jest w stanie aktywnym                                                         |
| wyłączony                              | boolean           | Określa, czy przycisk jest wyłączony                                                                 |
| ostrość                                | boolean           | Wskazuje, czy przycisk ma ostrość                                                                    |
| naKliknięciu                           | funkcja           | Funkcja zwrotna, która uruchamia się po kliknięciu przycisku                                         |

</Tab>

</Tabs>

## Lekki Ikonowy Przycisk

<Tabs>
<Tab title="Usage">

```jsx
import { LightIconButton } from "@/ui/input/button/components/LightIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <LightIconButton
      className
      testId="test1"
      Icon={IconSearch}
      title="Title"
      size="small"
      accent="secondary"
      active={true}
      disabled={false}
      focus={true}
      onClick={() => console.log("click")}
    />
  );
};
```

</Tab>

<Tab title="Props">

| wariant      | Typ                   | Opis                                                                                                 |
| ------------ | --------------------- | ---------------------------------------------------------------------------------------------------- |
| nazwaKlasy   | ciąg znaków           | Opcjonalna nazwa dla dodatkowego stylowania                                                          |
| testId       | ciąg znaków           | Identyfikator testowy dla przycisku                                                                  |
| Ikona        | `React.ComponentType` | Opcjonalny komponent ikony wyświetlany wewnątrz przycisku                                            |
| tytuł        | ciąg znaków           | Treść tekstowa przycisku                                                                             |
| rozmiar      | ciąg znaków           | Rozmiar przycisku. Posiada dwie opcje: `mały` i `średni`             |
| akcent       | ciąg znaków           | Kolor akcentu przycisku. Options include: `secondary` and `tertiary` |
| aktywny      | boolean               | Określa, czy przycisk jest w stanie aktywnym                                                         |
| wyłączony    | boolean               | Określa, czy przycisk jest wyłączony                                                                 |
| ostrość      | boolean               | Wskazuje, czy przycisk ma ostrość                                                                    |
| naKliknięciu | funkcja               | Funkcja zwrotna, która uruchamia się po kliknięciu przycisku                                         |

</Tab>

</Tabs>

## Główny Przycisk

<Tabs>
<Tab title="Usage">

```jsx
import { MainButton } from "@/ui/input/button/components/MainButton";
import { IconCheckbox } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <MainButton
      title="Checkbox"
      fullWidth={false}
      variant="primary"
      soon={false}
      Icon={IconCheckbox}
    />
  );
};
```

</Tab>

<Tab title="Props">

| zastosujRozmycie         | Typ                              | Opis                                                                                                                    |
| ------------------------ | -------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
| tytuł                    | ciąg znaków                      | Treść tekstowa przycisku                                                                                                |
| pełnaSzerokość           | boolean                          | Określa, czy przycisk ma zajmować całą szerokość kontenera                                                              |
| wariant                  | ciąg znaków                      | The visual style variant of the button. Opcje obejmują `primary` i `secondary`                          |
| wkrótce                  | boolean                          | Wskazuje, czy przycisk jest oznaczony jako „wkrótce” (np. dla nadchodzących funkcji) |
| Ikona                    | `React.ComponentType`            | Opcjonalny komponent ikony wyświetlany wewnątrz przycisku                                                               |
| Rekwizyty `button` React | `React.ComponentProps<'button'>` | Obsługiwane są wszystkie standardowe rekwizyty przycisków HTML                                                          |

</Tab>

</Tabs>

## Okrągły Ikonowy Przycisk

<Tabs>
<Tab title="Usage">

```jsx
import { RoundedIconButton } from "@/ui/input/button/components/RoundedIconButton";
import { IconSearch } from "@tabler/icons-react";

export const MyComponent = () => {
  return (
    <RoundedIconButton
      Icon={IconSearch}
    />
  );
};
```

</Tab>

<Tab title="Props">

| wariant                  | Typ                                             | Opis |
| ------------------------ | ----------------------------------------------- | ---- |
| Ikona                    | `React.ComponentType`                           |      |
| Rekwizyty `button` React | `React.ButtonHTMLAttributes<HTMLButtonElement>` |      |

</Tab>

</Tabs>
